<script setup lang="ts">
import AForm from './form.vue'
import {BluePrintApi, BlueprintDo} from "@/views/ai/agent/x6/api/blue-print-api";

const ins=ref<InstanceType<typeof AForm>>()
const openForm=()=>{
  ins.value?.open(true)
}
const loading=ref(false)
const data=ref<PageResult<BlueprintDo>>()
const query=ref<any>({
  pageSize:9,
  pageNo:1,
})
const pageCount=computed(()=>{
  const t=data.value?.total||0
  if (t>0){
    return Math.ceil(t/query.value.pageSize)
  }
  return 1
})
const load=async ()=>{
  loading.value = true
  data.value=await BluePrintApi.page(query.value)
  loading.value = false
}
const router = useRouter();
const goBp=(id:string)=>{
  router.push({path:`/ai/agents/${id}`})
}
const goChat=(id:string)=>{
  router.push({path:`/ai/agent-chat/${id}`})
}
const changePage=()=>{
  nextTick(()=>{
    load()
  })
}
onMounted(()=>{
  load()
})
</script>

<template>
  <div class="ai-agent">
    <div class="tools">
      <el-input style="width: 20%" v-model="query.name">
        <template #suffix>
          <el-button type="primary" link @click="load">搜索</el-button>
        </template>
      </el-input>
      <el-button type="primary" @click="openForm">新建</el-button>
    </div>
    <a-form ref="ins" @ok="load"/>
    <el-scrollbar class="cards" v-loading="loading">
      <el-row style="width: calc(100%)" :gutter="20" v-if="data?.list">
        <el-col :span="8" v-for="d in data.list as any[]" :key="d.id">
          <el-card style="margin-bottom: 20px">
            <template #header>
              <div style="display: flex;gap: 10px;align-items: center">
                <div class="card-header">
                  <span>{{d.name}}</span>
                </div>
                <div>
                  <el-tag v-for="t in d.tags" :key="t" style="margin-right: 5px">{{t}}</el-tag>
                </div>
              </div>
            </template>
            <div class="_card-body">
              <div>
                调用编码：{{d.code}}
              </div>
              <div>
                {{d.remark}}
              </div>
            </div>
            <template #footer>
              <div style="display: flex;justify-content: space-evenly">
                <el-button link>修改</el-button>
                <el-divider direction="vertical" />
                <el-button link @click="goBp(d.id)">逻辑</el-button>
                <el-divider direction="vertical" />
                <el-button link @click="goChat(d.id)">聊天</el-button>
                <el-divider direction="vertical" />
                <el-button link>分享</el-button>
                <el-divider direction="vertical" />
                <el-button link>删除</el-button>
              </div>
            </template>
          </el-card>
        </el-col>
      </el-row>
    </el-scrollbar>
    <div class="page">
      <el-pagination
        :layout="'prev, pager, next'" background
                     :page-count="pageCount"
                     v-model:current-page="query.pageNo"
                     :page-size="query.pageSize"
                     @current-change="changePage"/>
    </div>
  </div>
</template>

<style scoped lang="scss">
.ai-agent {
  width: 100%;
  height: calc(
    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - var(
      --app-content-padding
    )
  );
  display: flex;
  flex-direction: column;
  gap: 10px;
  .tools{
    height: 36px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: end;
  }
  .cards{
    height: calc(100% - 32px - 40px);
  }
  .page{
    height: 40px;
  }
}
._card-body{
  height: 100px;
}
</style>
